<style scoped>
.choose-show-container-component-form-data .in-carousel {
  min-width: 766px;
}
</style>
<!-- 添加主容器中的栅格系统 -->
<template>
  <div class="choose-show-container-component-form-data" v-if="dialogShow">
    <SetDesignDialog :title="'表单容器组件编辑'+ name " :dialogVisible="dialogShow" :close="close" :hasfooter="false" ref="settingDialog">
      <div class="dlg-main-box component-set">
        <el-tabs v-model="activeName">
          <el-tab-pane label="常用组件" name="1" v-if="NestingComponentIsShow">
            <NestingComponentFormN ref="nestingComponent" :containerBox="containerBox" :nesting="nestingContainer"
              :containerData="containerData" :componentForm="compData" :componentTypes="componentTypes"
              :editorComponent="editorComponent"
              :clearContainerBoxComponent="clearContainerBoxComponent" :clickCurrentComponent="clickCurrentComponent"
              :appendComponent="appendComponent" :close="close" />
          </el-tab-pane>
          <el-tab-pane label="容器组件" name="2" v-if="layes < 1 && NestingBoxIsShow">
            <NestingBoxN ref="nestingBox" :appendContainerCol="appendContainerCol"
              :clearContainerBoxChild="clearContainerBoxChild" :nestingBoxShow="nestingBoxShow"
              :maxcol="4" :pullComponent="pullComponent" :pullContainerPushComponent="pullContainerPushComponent" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import NestingBoxN from '@/components/common/design/dialog/box/NestingBoxN.vue'
import NestingComponentFormN from '@/components/common/design/dialog/box/NestingComponentFormN.vue'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import { mapState } from 'vuex'
import PubSub from 'pubsub-js'
var _ = require('lodash')
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    // 容器组件内容编辑
    VueFunctions.method(WindowType.CHOOSE_SHOW_CONTAINER_COMPONENT_FORM_DATA, ({ containerBox, containerData, name, layes, setNum, compData }) => {
      this.close()
      this.dialogShow = true
      this.name = name
      this.containerBox = containerBox
      this.containerData = containerData

      // 打开容器设置，关闭其他所有的展示组件编辑框
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE)

      // 获取展示组件类型数据
      this.componentTypes = filterComponentType(this.design.ref.contentWindow.vueFunc.getComponentType())

      this.layes = layes

      if (typeof setNum !== 'undefined' && setNum > -1 && setNum < 3) {
        if (parseInt(setNum) === 0) {
          this.activeName = '2'
          this.NestingBoxIsShow = true
          this.NestingComponentIsShow = false
        } else if (parseInt(setNum) === 2) {
          this.activeName = '1'
          this.NestingComponentIsShow = true
          this.NestingBoxIsShow = false
        }
      } else {
        this.activeName = '1'
        this.NestingBoxIsShow = true
        this.NestingComponentIsShow = true
      }

      // 嵌套box控制按钮显示设置
      this.nestingBoxShow.showAppend = true
      if (typeof setNum === 'undefined' || parseInt(setNum) === 1) {
        this.nestingBoxShow.showBack = true
      } else {
        if (parseInt(setNum) === 0) {
          this.nestingBoxShow.showClean = true
        }
      }

      // 设置是否有嵌套表单容器组件
      this.setNestingContainer()

      // 设置是否有可以抽离容器
      this.setPullComponent()

      this.compData = compData

      this.$nextTick(() => {
        if (this.$refs['settingDialog']) {
          this.$refs['settingDialog'].open()
        }
        // 设置嵌套初始值
        if (this.$refs['nestingBox']) {
          this.$refs['nestingBox'].init()
        }
        // 设置展示组件初始值
        if (this.$refs['nestingComponent']) {
          this.$refs['nestingComponent'].init()
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      name: '',
      activeName: '1',
      containerBox: null,
      containerData: null,
      formLabelWidth: '120px',
      // 是否存在嵌套的容器
      nestingContainer: false,
      // 有容器嵌套的前提下，是否只嵌套一个 col、box、component
      pullComponent: false,
      // 针对嵌套box组件中的操作按钮是否显示进行控制
      nestingBoxShow: {
        // 是否显示返回
        showBack: false,
        // 是否显示确定
        showSure: false,
        // 是否显示清空
        showClean: false,
        // 是否显示追加
        showAppend: false
      },
      initialIndex: 1,
      // 第几层
      layes: -1,
      // 获取component类型数据
      componentTypes: [],
      // 现有组件的数据
      compData: null,
      // 容器組件显示
      NestingBoxIsShow: true,
      // 常用组件显示
      NestingComponentIsShow: true
    }
  },
  methods: {
    close () {
      this.dialogShow = false
      this.name = ''
      this.containerBox = null
      this.containerData = null
      this.nestingContainer = false
      this.nestingBoxShow = {
        // 是否显示返回
        showBack: false,
        // 是否显示确定
        showSure: false,
        // 是否显示清空
        showClean: false,
        // 是否显示追加
        showAppend: false
      }
      this.initialIndex = 1
      this.layes = -1
      this.componentTypes = []
      this.compData = null
      this.NestingBoxIsShow = true
      this.NestingComponentIsShow = true
    },
    setNestingContainer () {
      this.nestingContainer = this.design.ref.contentWindow.vueFunc.isNestingContainerForm(this.containerData)
    },
    setPullComponent () {
      let bool = this.design.ref.contentWindow.vueFunc.isPullComponentForm(this.containerData) !== false
      this.pullComponent = bool
    },
    // 确定添加 containerFormcol 到 this.containerData 表单容器组件中
    appendContainerCol () {
      let containerCol = this.$refs['nestingBox'].getContainerCol()
      if (!containerCol) {
        return
      }
      this.design.ref.contentWindow.vueFunc.addContainerFormcolByContainerFormbox(this.containerData, _.cloneDeep(containerCol))
      if (this.nestingBoxShow.showClean === false) {
        this.nestingBoxShow.showClean = true
      }
      if (this.nestingBoxShow.showBack === true) {
        this.nestingBoxShow.showBack = false
      }
      this.close()
    },
    // 清空容器组件中所有的容器数据
    clearContainerBoxChild () {
      let bool = this.design.ref.contentWindow.vueFunc.clearContainerFormboxChildByContainerFormbox(this.containerData)
      if (!bool) {
        console.error('清除容器组件中所有的容器数据失败')
        this.$message.error('操作失败，请联系管理员！')
        return
      }
      if (this.nestingBoxShow.showClean === true) {
        this.nestingBoxShow.showClean = false
      }
      if (this.nestingBoxShow.showBack === false) {
        this.nestingBoxShow.showBack = true
      }
      this.setNestingContainer()
      this.close()
    },
    // 清空容器组件中的所有展示组件
    clearContainerBoxComponent () {
      let bool = this.design.ref.contentWindow.vueFunc.clearContainerFormboxComponentFormByContainerFormbox(this.containerData)
      if (!bool) {
        this.$message.error('操作失败，请联系管理员！')
        return
      }
      this.chooseMind()
      this.compData = null
      if (this.nestingBoxShow.showBack === false) {
        this.nestingBoxShow.showBack = true
      }
      this.setNestingContainer()
      this.close()
    },
    // 更新组件类型到容器组件当中
    editorComponent () {
      let componentType = this.$refs['nestingComponent'].getComponentType()
      if (componentType < 1) {
        this.$message.error('选择的组件类型不能小于1！')
        return
      }
      this.design.ref.contentWindow.vueFunc.editorComponentForm(this.containerData, componentType)
      this.close()
    },
    appendComponent (pst) {
      let componentType = this.$refs['nestingComponent'].getComponentType()
      if (componentType < 1) {
        this.$message.error('选择的组件类型不能小于1！')
        return
      }
      this.design.ref.contentWindow.vueFunc.appendComponentForm(this.containerData, componentType, pst)
      this.setNestingContainer()
      this.close()
    },
    // 编辑当前组件
    clickCurrentComponent () {
      this.design.ref.contentWindow.vueFunc.setupComponent(this.compData)
      this.close()
    },
    // 抽离
    pullContainerPushComponent () {
      this.design.ref.contentWindow.vueFunc.pullContainerFormPushComponentForm(this.containerData)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    NestingBoxN,
    NestingComponentFormN
  }
}

function filterComponentType (componentType) {
  // 过滤只留下表单组件
  let result = componentType.filter(element => {
    return element.cateType === 6
  })
  return result
}

</script>
